<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>聊天室登录界面</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>欢迎来到聊天室</h1>
<h1>modified by 李四</h1>
<form action="VerifyServlet" method="post">
    <div>
        <label for="userName">用户名:</label>
        <input type="text" id="userName" name="userName" required>
        <br>
        <span id ="userName_err" class = "err" style ="display :none">
            用户名已存在
        </span>
    </div>
    <div>
        <label for="userInput">请输入验证码:</label>
        <input type="text" id="userInput" name="userInput" required>
    </div>
    <div>
        <button type="button" onclick="generateCaptcha()">生成验证码</button>
        <button type="submit">登录</button>
        <div id="captchaContainer" class="captchaContainer">
            <!-- 动态生成的验证码图片将在这里显示 -->
        </div>
        <span class="underline" onclick="refreshCaptcha()">看不清？点击刷新</span>
    </div>


</form>
<p id="result">${requestScope.result}</p>
<script>

<%--    1.给用户名输入框绑定失去焦点时间--%>
    document.getElementById("userName").onblur = function (){
    //     2.发送ajax请求
        //获取用户名的值
        var userName = this.value;
        // 2.1.创建核心对象
// 创建 XMLHttpRequest 对象
        const xhttp = new XMLHttpRequest();

// 定义回调函数
        xhttp.onload = function() {
            // 您可以在这里使用数据
        }

// 2.2.发送请求
// 发送请求
        xhttp.open("GET", "http://localhost:8080/demo7_war_exploded/SelectUserServlet?userName="+userName);
        xhttp.send();
// 2.3.获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                // document.getElementById("demo").innerHTML = this.responseText;
                // alert (this.responseText);
                const responseText = this.responseText.trim(); // 去除空白字符
                if(responseText == "true"){
                    document.getElementById("userName_err").style.display = "inline-block";
                } else{
                    document.getElementById("userName_err").style.display='none';
                    alert (this.responseText);
                }
            }
        };
    }
    function generateCaptcha() {
        fetch('GenerateCaptchaServlet')
            .then(response => response.text())
            .then(captcha => {
                const container = document.getElementById('captchaContainer');
                container.innerHTML = '';
                for (let i = 0; i < captcha.length; i++) {
                    const img = document.createElement('img');
                    img.src = 'img/' + captcha[i] + '.png';
                    img.alt = '验证码';
                    container.appendChild(img);
                }
            })
            .catch(error => console.error('Error generating captcha:', error));
    }

    function refreshCaptcha() {
        generateCaptcha();
    }

</script>
</body>
</html>